<template>
  <el-dialog
    title="编辑护理单正常值信息"
    :visible.sync="dialogVisible"
    :showClose="false"
    :before-close="cancelDialog"
    :close-on-click-modal="false"
    class="mod_box"
    custom-class="role-mask"
  >
    <el-form class="form" label-width="87px">
      <el-form-item label="项目: ">
        <el-select
          v-model="dialogInfo.itemCode"
          placeholder="请选择项目"
          clearable
          class="bianji"
        >
          <el-option
            v-for="item in xuegoulaozu"
            :key="item.id"
            :label="item.value"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="最高值 : ">
        <el-input v-model="dialogInfo.maxValue" class="bianji" />
      </el-form-item>
      <el-form-item label="最低值 : ">
        <el-input v-model="dialogInfo.minimumValue" class="bianji" />
      </el-form-item>
      <el-form-item label="项目所属表: ">
        <el-select
          v-model="dialogInfo.itemFormCode"
          placeholder="请选择项目所属表"
          clearable
          class="bianji"
        >
          <el-option
            v-for="item in options1"
            :key="item.id"
            :label="item.value"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="状态 : ">
        <el-switch
          v-model="dialogInfo.status"
          class="tablescope1"
          inactive-text="禁用"
          active-text="启用"
          :active-value="1"
          :inactive-value="2"
          active-color="#02538C"
          inactive-color="#B9B9B9"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelDialog_quxiao">取 消</el-button>
      <el-button type="primary" @click="cancelDialog">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  NormalValueDictionaryedit,
  monitorDictionaryQueryList,
  MonitorManufacturersDictionarygetList,
} from "@/api/table";

export default {
  name: "Lisecome",
  components: {},
  // 父组件 传 过来的 值
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    dialogInfo: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      aaa: [],
      typeCode: "",
      list: {
        monitor_name: "",
        monitor_type: "",
        monitor_ip: "",
        monitor_port: "",
        id: "",
        sattus: "",
        connect_type: "",
        device_role: "",
      },
      dazuiwaList: [],
      options1: [
        {
          id: "0",
          value: "生命体征",
          label: "生命体征",
        },
                {
          id: "1",
          value: "基础护理",
          label: "基础护理",
        },
      ],
      xuegoulaozu: [
        {
          id: "0",
          value: "体温",
          label: "体温",
        },
        {
          id: "1",
          value: "心率",
          label: "心率",
        },
        {
          id: "2",
          value: "脉率",
          label: "脉率",
        },
        {
          id: "3",
          value: "呼吸",
          label: "呼吸",
        },
        {
          id: "4",
          value: "血糖",
          label: "血糖",
        },
                {
          id: "5",
          value: "瞳孔大小",
          label: "瞳孔大小",
        },
        {
          id: "6",
          value: "spo2",
          label: "spo2",
        },
        {
          id: "7",
          value: "深静脉血栓评估",
          label: "深静脉血栓评估",
        },
        {
          id: "8",
          value: "压疮评分",
          label: "压疮评分",
        },
        {
          id: "9",
          value: "跌倒坠床评分",
          label: "跌倒坠床评分",
        },
        {
          id: "10",
          value: "导管评分",
          label: "导管评分",
        },
        {
          id: "11",
          value: "自理能力评分",
          label: "自理能力评分",
        },
        {
          id: "12",
          value: "疼痛评分",
          label: "疼痛评分",
        },
        {
          id: "13",
          value: "镇静评分",
          label: "镇静评分",
        },
        {
          id: "14",
          value: "镇痛评分",
          label: "镇痛评分",
        },
      ],
      options2: [
        {
          id: "0",
          value: "直连",
          label: "直连",
        },
        {
          id: "1",
          value: "非直连",
          label: "非直连",
        },
      ],
      options3: [
        {
          id: "0",
          value: 1,
          label: "否",
        },
        {
          id: "1",
          value: 2,
          label: "是",
        },
      ],
    };
  },
  watch: {
    // 监听 弹窗显示， 可以用来写 请求接口
    dialogVisible: function (newVal, oldVal) {
      if (newVal) {
        console.log(newVal);
      }
    },
  },
  created() {},
  mounted() {
    monitorDictionaryQueryList().then((res) => {
      this.aaa = res.data;
    });
    (this.typeCode = this.dialogInfo.type_code), this.jianhuyi();
  },
  methods: {
    jianhuyi() {
      MonitorManufacturersDictionarygetList({}).then((res) => {
        this.dazuiwaList = res.data;
      });
    },
    cancelDialog_quxiao() {
      this.$emit("update:dialogVisible", false);
    },
    // 修改父组件传过来的值
    cancelDialog() {
      NormalValueDictionaryedit({
        id: this.dialogInfo.id,
        status: this.dialogInfo.status,
        itemCode: this.dialogInfo.itemCode,
        maxValue: this.dialogInfo.maxValue,
        minimumValue: this.dialogInfo.minimumValue,
        itemFormCode: this.dialogInfo.itemFormCode,
      }).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "保存成功",
            type: "success",
          });
          this.$emit("update:dialogVisible", false);
        } else {
          this.$message({
            message: "保存失败",
            type: "warning",
          });
        }
      });
    },
  },
};
</script>
<style lang='scss' scoped>
.form {
  padding: 0 10px;
}

.tablescope1 {
  position: relative !important;
  left: -37px !important;

  ::v-deep .el-switch__label--left {
    position: relative;
    left: 59px;
    color: #fff;
    z-index: -1111;
  }
  ::v-deep .el-switch__core {
    width: 58px !important;
  }
  ::v-deep .el-switch__label--right {
    position: relative;
    right: 59px;
    color: #fff;
    z-index: -1111;
  }
  ::v-deep .el-switch__label--right.is-active {
    z-index: 1111;
    color: #fff !important;
  }
  ::v-deep .el-switch__label--left.is-active {
    z-index: 1111;
    color: #9c9c9c !important;
  }
}
.role-mask {
  border-radius: 6px;
}
.role-mask .el-dialog__header {
  border-bottom: 1px solid #e8eaec;
}

.role-mask .el-dialog__body {
  padding: 16px 16px 0px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
}

.role-mask .el-dialog__footer {
  border-top: 1px solid #e8eaec;
}

@media screen and (min-width: 1200px) and (max-width:1365px) {
  .bianji {
    width: 93%;
  }

  .mod_box {
    margin-left: 20%;
    width: 66%;
  }
}

@media screen and (min-width: 1366px) and (max-width:1600px) {
  .bianji {
    width: 93%;
  }

  .mod_box {
    margin-left: 20%;
    width: 60%;
  }
}

@media screen and (min-width: 1800px) {
  .bianji {
    width: 94%;
  }
  .mod_box {
    margin-left: 28%;
    width: 44%;
  }
}
</style>
